<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            
        position: absolute;
        top: 42%;
        left:40%;
        text-align: center;
        }
        div p{
            margin-bottom: 20px;
        }
        input{
            width: 200px;
            height: 30px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }
       .denglu{
        background-color: cornflowerblue;
        color: white;
        border: 0;
       }
 
        

    </style>
</head>
<body>
    <div>
        <p>注册</p>
        <input type="text" placeholder="输入用户名" class="shouji"><br>
        <input type="text" placeholder="输入密码" class="mima"><br>
        <input type="text" placeholder="确认密码" class="mima"><br>
        <input type="button" value="登录" class="denglu">
        <a href="./作业2登录.html">去登录</a>
      </div>

    <script src="./promise请求.js"></script>

    <script>
        let lis=document.querySelectorAll('input')
        //给button绑定点击事件
        lis[3].onclick = function(){
            //对表单内容做校验( 为空校验, 格式校验 )
            if( lis[0].value && lis[1].value ){
              
                if(/^\d{4}$/.test(lis[1].value)&&lis[1].value==lis[2].value){
                    //通过校验, 发起登陆请求
                    ajax('get','https://yantianfeng.com/api/register',{ 
                        username:lis[0].value,
                        password: lis[1].value,
                    }).then((data)=>{
                        if( data.status == 200 ){
                           alert('注册成功')
                        }else if(data.status == 400){
                            alert('用户已存在,注册失败!')
                        }
                        else{
                            alert('登录失败')
                        }
                        
                    })
                    
                }else{
                   if(lis[1].value!=lis[2].value){
                    alert('密码和确认密码不一致')
                   }else{
                    alert('请输入正确的手机号和密码')
                   }
                }
            }else{
                alert('用户名/密码不能为空!')
            }   
            
           
        }

    </script>

</body>
</html>